<!DOCTYPE html>
<html>
  <head>
    <title>IMDB</title>
    <script src="static/js/d3.min.js"></script>
    <script src="static/js/axes.js"></script>
  </head>
  <body>
    <svg width="1600" height="800" id="mainsvg" class="svgs"></svg>
    <script>
      const svg = d3.select('#mainsvg');
      const width = +svg.attr('width');
      const height = +svg.attr('height');
      const margin = {top: 120, right: 50, bottom: 100, left: 120};
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
      const g = svg.append('g').attr('id', 'maingroup')
      .attr('transform', `translate(${margin.left}, ${margin.top})`);
      const xValue = d => d.imdbRating;
      const yValue = d => d.ratingCount;
      let xScale, yScale; 
      const yAxisLabel = 'ratingCount';
      const xAxisLabel = 'imdbRating';

      const render_init = function(data){
          xScale = d3.scaleLinear()
          .domain([0, d3.max(data, xValue)])
          .range([0, innerWidth])
          .nice();
          yScale = d3.scaleLinear()
          .domain([0, d3.max(data, yValue)])
          .range([innerHeight, 0])
          .nice();
          fullAxes();
      }; 

      const render_update = function(data){
          g.selectAll('circle').data(data).join('circle')
          .attr('r', '5')
          .attr('cx', d => xScale(xValue(d)))
          .attr('cy', d => yScale(yValue(d)))
          .attr('fill', 'green')
          .attr('opacity', 0.2)
      };

      d3.csv('./static/data/imdb.csv').then(function(data){
        data.forEach( d => {
            d.imdbRating  = +(d.imdbRating);
            d.ratingCount = +(d.ratingCount);
            if ( Number.isNaN(d.ratingCount) ){
                d.ratingCount = 0;
            }
        } )
        console.log(data.map( yValue ))
        render_init(data);
        render_update(data);
        

        /*let c = 0;
        let intervalId = setInterval(() => {
            if(c >= allkeys.length){
                clearInterval(intervalId);
            }else{
                let key = allkeys[c];
                render_update_alter(provinces[key]);
                c = c + 1;
            }
        }, 2000);*/
      });
    </script>
  </body>
</html>